import React, {useEffect, useState} from 'react';
import {View, Text, StyleSheet, Image, ScrollView} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import {RootState} from '@/models/index';
import {connect, ConnectedProps} from 'react-redux';
import {IRecommends} from '../../models/recommends';
import Touchable from '../../components/Touchable';

const mapStateToProps = ({recommends, loading}: RootState) => {
  return {
    recommends: recommends?.recommends,
    recommendsByType: recommends?.recommendsByType,
    // 在触发getGoodsList方法时加上加载效果
    loading: loading.effects['recommends/getRecommendsList'],
  };
};
const connector = connect(mapStateToProps);
// 获取映射出来的props的类型，给IProps做定义
type ModelState = ConnectedProps<typeof connector>;
interface IProps extends ModelState {
  navigation: {navigate: any};
}

const Recommend = (props: IProps) => {
  const {recommends, dispatch, recommendsByType,navigation} = props;
  const [tabName, setTabName] = useState<string>('recommend');
  useEffect(() => {
    // 推荐默认获取全部的数据
    dispatch({
      type: 'recommends/getRecommendsList',
      payload:{
        callback:(data:IRecommends[])=>{
          console.log("1")
        }
      }
    });
    // 其他按照关键词进行模糊搜索
  }, []);
  const hanldeItem = (item:IRecommends) => {
    console.log('点击了Item');
    navigation.navigate("RecommendInfo",{
      item: item
    });
  };
  return (
    <View style={styles.recommend}>
      <View style={styles.tab}>
        <Touchable
          onPress={() => {
            setTabName('recommend');
          }}>
          <Text
            style={tabName === 'recommend' ? styles.highColor : styles.tabText}>
            推荐
          </Text>
        </Touchable>
        <Touchable
          onPress={() => {
            setTabName('retro');
            dispatch({
              type: 'recommends/getRecommendsListByType',
              payload: {
                type: '复古',
              },
            });
          }}>
          <Text style={tabName === 'retro' ? styles.highColor : styles.tabText}>
            复古
          </Text>
        </Touchable>
        <Touchable
          onPress={() => {
            setTabName('hanfu'),
              dispatch({
                type: 'recommends/getRecommendsListByType',
                payload: {
                  type: '汉服',
                },
              });
          }}>
          <Text style={tabName === 'hanfu' ? styles.highColor : styles.tabText}>
            汉服
          </Text>
        </Touchable>
        <Touchable
          onPress={() => {
            setTabName('travel'),
              dispatch({
                type: 'recommends/getRecommendsListByType',
                payload: {
                  type: '旅拍',
                },
              });
          }}>
          <Text
            style={tabName === 'travel' ? styles.highColor : styles.tabText}>
            旅拍
          </Text>
        </Touchable>
        <Touchable
          onPress={() => {
            setTabName('jiaopian'),
              dispatch({
                type: 'recommends/getRecommendsListByType',
                payload: {
                  type: '胶片',
                },
              });
          }}>
          <Text
            style={tabName === 'jiaopian' ? styles.highColor : styles.tabText}>
            胶片
          </Text>
        </Touchable>
        <Touchable
          onPress={() => {
            setTabName('xiaoiqngxin'),
              dispatch({
                type: 'recommends/getRecommendsListByType',
                payload: {
                  type: '小清新',
                },
              });
          }}>
          <Text
            style={
              tabName === 'xiaoiqngxin' ? styles.highColor : styles.tabText
            }>
            小清新
          </Text>
        </Touchable>
        <Touchable
          onPress={() => {
            setTabName('shenghuosuipai'),
              dispatch({
                type: 'recommends/getRecommendsListByType',
                payload: {
                  type: '生活随拍',
                },
              });
          }}>
          <Text
            style={
              tabName === 'shenghuosuipai' ? styles.highColor : styles.tabText
            }>
            生活随拍
          </Text>
        </Touchable>
      </View>
      {tabName === 'recommend' && (
        <ScrollView style={styles.bottom}>
         <View style={styles.bottom1}>
         {recommends &&
            JSON.stringify(recommends) !== '[]' &&
            recommends.map(i => {
              return (
                <Touchable
                  key={i._id}
                  style={styles.rItem}
                  onPress={()=>{hanldeItem(i)}}>
                  {i.recommend_images[0].r_url && (
                    <Image
                      source={{uri: i.recommend_images[0].r_url}}
                      style={styles.image}
                    />
                  )}
                  <Text style={styles.text}>
                    {i.recommend_title && i.recommend_title.length > 15
                      ? `${i.recommend_title.substring(0, 15)}...`
                      : i.recommend_title}
                  </Text>
                </Touchable>
              );
            })}
         </View>
        </ScrollView>
      )}
      {tabName !== 'recommend' && (
        <ScrollView style={styles.bottom}>
        <View style={styles.bottom1}>
        {recommendsByType &&
            JSON.stringify(recommendsByType) !== '[]' &&
            recommendsByType.map(i => {
              return (
                <Touchable
                  key={i._id}
                  style={styles.rItem}
                  onPress={()=>{hanldeItem(i)}}>
                  {i.recommend_images[0].r_url && (
                    <Image
                      source={{uri: i.recommend_images[0].r_url}}
                      style={styles.image}
                    />
                  )}
                  <Text style={styles.text}>
                    {i.recommend_title && i.recommend_title.length > 15
                      ? `${i.recommend_title.substring(0, 15)}...`
                      : i.recommend_title}
                  </Text>
                </Touchable>
              );
            })}
        </View>
        </ScrollView>
      )}
    </View>
  );
};
const styles = StyleSheet.create({
  recommend: {
    flex: 1,
    
  },
  tab: {
    height: 50,
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
    padding: 10,
    backgroundColor:"fff"
  },
  highColor: {
    fontSize: 22,
    color: 'rgba(144,0,0,0.9)',
    fontWeight:"700"
  },
  tabText: {
    fontSize: 16,
    color: 'black',
    fontWeight:"700"
  },
  bottom: {
    flex: 1,
    padding: 20,
  },
  bottom1:{
    marginBottom:50,
  },
  rItem: {
    flex: 1,
    marginVertical: 10,
  },
  image: {
    width: '100%',
    height: 180,
    borderRadius: 30,
  },
  text: {
    height: 35,
    fontSize: 18,
    lineHeight: 35,
    fontWeight: '700',
    color: 'black',
  },
});
export default connector(Recommend);
